<template>
	<view class="content">
		<view class="current">
			<view class="integral-title">
				<view class="integral-card" >
					<view class="integral-card-left"><span style="margin-left: 70rpx;font-size: 38rpx;margin-bottom: 25rpx;">当前积分：</span><text style="color: #FFFFFF;font-size: 70rpx;">{{integral?integral:0}}</text></view>
					<view class="integral-card-right"></view>
				</view>
				<view style="width: 100%;height: 230rpx;box-shadow: inset -1px 10px 10px #ffffff, inset -1px -10px 10px rgba(1,1,1,0.1);position: absolute;top: -30rpx;"></view>
			</view>
			<view class="item-cow" @click="navTo('/pages/integral/history')">
				历史积分明细
				<text class="yticon icon-you"></text>
			</view>
			<view class="item-cow" @click="navTo('/pages/integral/exchange')">
				兑换商品明细
				<text class="yticon icon-you"></text>
			</view>
		</view>
		<view class="integral-title">当前可兑换的商品</view>
		<view class="goods-list">
			<view 
				v-for="(item, index) in goodsList" :key="index"
				class="goods-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.pic" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.name}}</text>
				<view class="country clamp">
					<img :src="item.nationalFlag" alt="">
					<text>{{item.originCountry}}</text>
				</view>
				<view class="price-box clamp">
					<view class="price">{{item.usePointLimit}}积分 <span>￥{{item.price}}</span></view>
					<!-- <text>已售 {{item.sales}}</text> -->
				</view>
			</view>
		</view>
		<!--<uni-load-more :status="loadingType"></uni-load-more>-->
		<view class="integral-title">当前可兑换的优惠券</view>
		<view class="coupon-list-n">
			<view class="coupon" v-for="(item,index) in cateList">
				<view class="coupon-img">
					<img :src="item.productPic" alt="">
				</view>
				<view class="coupon-right">
					<view class="c-title">{{item.name}}</view>
					<view class="c-sub">{{item.name}}</view>
					<view class="c-time">{{item.startTime}}-{{item.endTime}}</view>
					<view class="c-integral">{{item.integral}}积分</view>
					<view class="c-p">
						<view class="progress">
							<view class="pro" :style="'width:'+item.per+'%'">&nbsp;</view>
							<view class="info">已抢{{item.per}}%</view>
						</view>
						<view class="btn" @click="gotCoupon(item.id)">立即兑换</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import {_userIntegral,_integralToPro,_integralToCoupon,_addCoupon} from '../../common/vmeitime-http/mem.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import unit from "../../common/utils/util"
	export default {
		components: {
			uniLoadMore	
		},
		data() {
			return {
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				integral:0
			};
		},
		
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			this.cateId = options.tid;
			
			
			// ----接口函数-----
			// this.loadData();
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			// this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			// this.loadData();
		},
		methods: {
			//加载商品 ，带下拉刷新和上滑加载
			async loadData() {
				let tempDataIntegral = await _userIntegral();//个人积分
				this.integral = tempDataIntegral.data.data.integration;

				this.gotIntegralPro({pageNum:"1",pageSize:"8"});//兑换商品


				this.gotIntegralCoupon({pageNum:"1",pageSize:"4"});
				/*下方测试数据，待删除*/
//                this.goodsList = await this.$api.json('goodsList');
			},
			//详情
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}&buyN=integral`
				})
			},
			//获得积分兑换的商品列表
			async gotIntegralPro(para){
                let tempData = await _integralToPro(para)
                this.goodsList = tempData.data.data.list;
			},
			//获得积分兑换的优惠卷列表
			async gotIntegralCoupon(para){
                let tempData = await _integralToCoupon(para)
                let cateList = tempData.data.data.list;
				if(cateList){
					cateList.forEach((item=>{
					    item.per = Math.round((item.receive_count/item.count)*100);
					    item.startTime = unit.formatDate.format(new Date(item.startTime),'yyyy.MM.dd')
					    item.endTime = unit.formatDate.format(new Date(item.endTime),'yyyy.MM.dd')
					}));
					this.cateList = cateList;
				}
			},
            navTo(url){
                uni.navigateTo({
                    url
                })
            },
			/*领取优惠券*/
            async gotCoupon(id){
                let tempData = await  _addCoupon({couponId:id});
                if(tempData.data.code==200){
                    this.$api.msg("兑换优惠券成功！")
				}
			},
            stopPrevent(){}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
	}
	.content{
		/*padding-top: 96upx;*/
	}
	/*当前积分*/
	.current{
		background: #ffffff;
		font-size: 26upx;
		color: $font-color-dark;
		.item-cow{
			position: relative;
			padding: 30upx 40upx;
			clear: both;
			border-top: 2upx solid #f6f6f6;
			text{
				float: right;
			}
		}
	}
	.integral-card{
		background-image: url(../../static/images/person/integralcard.png);
		width: 80%;
		border-radius: 20rpx;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		display: flex;
		color: #FFFFFF;
		
		.integral-card-left{
			flex: 3;
			font-size: 35rpx;
			display: flex;
			align-items: center;

		}
		.integral-card-right{
			flex: 1;
		}

	}
	.integral-title{
		display: flex;
		color: $font-color-dark;
		font-size: $font-base + 2upx;
		text-align: center;
		padding: 29rpx 0 0 0;
		height: 200rpx;
		justify-content: center;
		span{
			font-weight: bold;
		}
		text{
			color: $uni-color-primary;
			font-size: 50upx;
			font-weight: bold;
		}
	}
	.navbar{
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			color: #656565;
			position: relative;
			&.current{
				color: #017F01;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #017F01;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: #017F01;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 商品列表 */
	.goods-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		// background: #fff;
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 49.5%;
			padding-bottom: 20upx;
			margin-bottom: 15upx;
			background: #ffffff;
			border-radius: 10upx;
			&:nth-child(2n+1){
				margin-right: 1%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 396upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: 26upx;
			color: #282828;
			line-height: 50upx;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}
		.price{
			font-size: 30upx;
			color: #017F01;
			line-height: 1;
			font-weight: bold;
			&:before{
				/*content: '￥';*/
				font-size: 26upx;
			}
			span{
				text-decoration:line-through;
				font-size: 22upx;
				color: #989898;
				margin-left: 10upx;
				font-weight: normal;
			}
		}
		.country{
			margin: -2upx auto 8upx;
			width: 100%;
			display: flex;
			align-items: center;
			img{
				width:23upx;
				height:23upx;
				margin-right: 10upx;
				vertical-align: top;
				border-radius: 50%;
				/*margin-top: 21upx;*/

			}
			text{
				color: #656565;
				font-size: 24upx;
			}
		}
	}
	/*优惠券列表*/
	.coupon-list-n{
		padding: 40rpx;
	}
	.coupon{
		display: flex;
		background: #ffffff;
		border-radius: 5upx;
        margin-bottom: 30upx;
		.coupon-img{
			width: 290upx;
			height: 286upx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.coupon-right{
			font-size: 24upx;
			color: #989898;
			display: flex;
			flex-direction: column;
			justify-content: center;
			line-height: 47rpx;
			flex: 1;
			padding-left: 20upx;
			.c-title{
				font-size: 30upx;
				color: $font-color-dark;
			}
			.c-sub{
				font-size: 24upx;
				color: #656565;
			}
			.c-integral{
				font-size: 30upx;
				font-weight: bold;
				color: $uni-color-primary;
			}
			.c-p{
				/*display: flex;*/
				line-height: 30upx;
				overflow: hidden;
				.progress{
					overflow: hidden;
					position: relative;
					display: inline-block;
					color: $uni-color-primary;
					border: 2upx solid $uni-color-primary;
					border-radius: 20upx;
					padding: 0 30upx;
					margin-top: 16upx;
					.pro{
						position: absolute;
						width: 60%;
						height: 100%;
						left: 0;
						background: #70B290;
						z-index: 0;
					}
					.info{
						position: relative;
						z-index: 1;
					}
				}
				.btn{
					display: inline-block;
					background: $uni-color-primary;
					color: #ffffff;
					border-radius: 5upx;
					padding: 17upx 30upx;
					float: right;
					margin-right: 30upx;
				}
			}
		}
	}
.clamp{
	padding-left: 15upx;
}
</style>
